<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="博客列表">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="id" label="id" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="文章名"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="classify"
            label="分类"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="content"
            label="文章简介"
            width="200"
            align="center"
            show-overflow-tooltip
          >
            <!-- 使用插槽显示内容，将 html 标签解析 -->
            <template slot-scope="scope">
              <div v-html="scope.row.content"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="author"
            label="作者"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="posttime"
            label="发表日期"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="100px" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.native.prevent="handleEdit(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click.native.prevent="handleDel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <!-- scope  -->
        </el-table>
      </el-tab-pane>

      <el-pagination
        :page-size="pageSize"
        layout="total, prev, pager, next , jumper"
        :total="total"
        :page-count="totalPage"
        @current-change="handleCurrentChange"
        @prev-click="prev(page)"
        @next-click="next(page)"
      >
      </el-pagination>
      <el-dialog
        v-if="dialogVisible"
        title="文章编辑"
        :visible.sync="dialogVisible"
        width="50%"
        style="margin-top: -100px"
        align="center"
      >
        <!-- 编辑 -->
        <editorBlog :editorContent="editorContent"></editorBlog>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
import editorBlog from "./editorBlog.vue";
export default {
  components: {
    editorBlog,
  },
  data() {
    return {
      tableData: [],
      editorContent: "",
      page: 1,
      total: 0,
      totalPage: 0,
      pageSize: 10,
      dialogVisible: false,
    };
  },
  mounted() {
    this.getBlogList();
    this.getPageList(this.page);
  },
  methods: {
    getBlogList() {
      this.$http.get("/blog").then(
        (res) => {
          // this.tableData = res.data;
          this.total = res.data.length;
          console.log(this.total);
          this.totalPage = Math.ceil(res.data.length / this.pageSize);
          console.log(this.totalPage);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getPageList(page) {
      this.$http
        .get("/blog", {
          params: {
            _page: page,
            _limit: this.pageSize,
          },
        })
        .then(
          (res) => {
            this.tableData = res.data;
          },
          (err) => {
            console.log(err);
          }
        );
    },
    // 页码发生变化时
    handleCurrentChange(page) {
      this.getPageList(page);
    },
    // 获取上一页数据
    prev(page) {
      this.getPageList(page);
    },
    // 获取下一页数据
    next(page) {
      this.getPageList(page);
    },
    handleEdit(index) {
      this.dialogVisible = true;
      this.editorContent = index;
      console.log(this.editorContent);
    },
    handleDel(index) {
      let permissions = sessionStorage.getItem("permissions");
      if (permissions != 0) {
        this.$message({
          type: "error",
          message: "没有权限",
        });
        return;
      }
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$http.delete(`blog/${index.id}`).then(
            (res) => {
              location.reload();
            },
            (err) => {
              console.log(err);
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
td,
div,
p {
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-pagination.is-background {
  margin: 15px 0px 0px 0px;
}
</style>